<template>
	<div class="goods-select">
		<div class="select-left">
			<div class="big-img">
				<!--<img src=""/>-->
			</div>
			<div class="thumb-pic">

			</div>
			<div class="share-box">
				<span class="share-icon"></span><span class="share-text">分享</span>
				<a href="" class="wechat-icon"></a>
				<a href="" class="sina-icon"></a>
				<a href="" class="qq-icon"></a>
			</div>
		</div>
		<div class="select-right">
			<h1>“生活大爆炸”看剧必备款 定制卫衣 特惠包邮</h1>
			<div class="select-goods-info">
				<div class="select-goods-price">
					<span class="select-goods-price-1">价格</span><span class="select-goods-price-2">{{showPrice}}</span><span class="select-goods-price-3">包邮</span>
				</div>
				<div class="select-goods-discount">
					<span class="select-goods-discount-1">UDZ优惠</span><span class="select-goods-discount-2">全场10元优惠</span>
					<a class="select-goods-discount-3" href="#">领取</a>
				</div>

				<div class="select-goods-target">
					<div class="select-goods-target-all">
						<span>活动目标</span><br />
						<span>600</span>
					</div>
					<div class="select-goods-target-sold">
						<span>已抢购</span><br />
						<span>590</span>
					</div>
				</div>
				<div class="select-iprogress">
					<iprogress></iprogress>
				</div>
			</div>
			<div class="select-goods-option">
				<div v-for="item in goodsInfo.goodsStyle">
					<span>{{item.styleName}}</span>
					<ul>
						<li v-for="aDetail in item.styleDetail" @click="classCtrl" v-bind:priceClass="aDetail.priceClass">{{aDetail.detail}}</li>
					</ul>
				</div>
				<div class="select-goods-option-num">
					<span>数量</span>
					<input type="number" name="" id="" value="1" />
				</div>
			</div>
			<div class="buy-btn">
				活动已结束
			</div>
			<div class="other-info">
				<div class="other-info-promise">
					<span class="info-title">服务承诺</span>
					<span class="promise-day"></span><span>7天退换货</span>
					<span class="promise-quality"></span><span>品质溯源</span>
				</div>
				<div class="other-info-pay">
					<span class="info-title">支付方式</span>
					<span class="pay-card"></span>
					<span class="pay-ali"></span>
					<span class="pay-wechat"></span>
					<span class="pay-union"></span>
				</div>
				<div class="other-info-tips">
					<span class="info-title">温馨提示</span>
					<span>1.本活动已在67天前结束</span><br />
					<span class="tips-2">2.预计发货时间:<span class="tips-red">2017年01月21日左右</span></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import iprogress from "./iprogress.vue"
	export default {
		components: {
			iprogress,
		},
		data() {
			return {
				showPrice:"￥59-109",
				price:[{
					rmb:"￥109",
				},{
					rmb:"￥89",
				},{
					rmb:"￥59",
				}],
				goodsInfo: {
					priceRange: "￥59-109",
					target: 600,
					sold: 550,
					goodsStyle: [{
						styleName: "性别",
						styleDetail: [{
							detail: "男款",
						}, {
							detail: "女款",
						}],
					}, {
						styleName: "样式",
						styleDetail: [{
							detail: "圆领套头卫衣",
							priceClass:0,
						}, {
							detail: "套头连帽卫衣",
							priceClass:1,
						}, {
							detail: "基础圆领长袖T恤",
							priceClass:2,
						}],
					}, {
						styleName: "颜色",
						styleDetail: [{
							detail: "红",
						}, {
							detail: "黄",
						}, {
							detail: "绿",
						}],
					}, {
						styleName: "尺码",
						styleDetail: [{
							detail: "XS",
						}, {
							detail: "S",
						}, {
							detail: "M",
						}, {
							detail: "L",
						}, {
							detail: "XL"
						}],
					}]
				},
			}
		},
		methods: {
			classCtrl: function(ev) {
				if(ev.target.classList.contains("clicked")) {
					ev.target.classList.remove("clicked");
					if(ev.target.getAttribute('priceClass')){
						this.showPrice = this.goodsInfo.priceRange;
					}
				} else {
//					console.log(ev.target.parentNode);
					ev.target.classList.add("clicked");
					var elem = ev.target;
					var n = elem.parentNode.firstChild;
					for(; n; n = n.nextSibling) {
						if(n.nodeType === 1 && n !== elem) {
							if(n.classList.contains("clicked")) {
								n.classList.remove("clicked");
							}
						}
					}
					if(elem.getAttribute('priceClass')){
//						console.log(elem.getAttribute('priceClass'));
						this.showPrice = this.price[elem.getAttribute('priceClass')].rmb;
					}
				}
			}
		}
	}
</script>

<style lang="less" stylesheet="less">
	.goods-select {
		font-family: "微软雅黑";
		width: 1200px;
		height: 700px;
		margin: 0 auto;
		margin-top: 30px;
		/*background-color: red;*/
		.select-left {
			width: 500px;
			height: 100%;
			float: left;
			/*background-color: yellow;*/
			.big-img {
				width: 500px;
				height: 500px;
				background-color: #f2f2f2;
				background-image: url("http://static.udz.com/uploads/2016/11/18/8215814922773884.png");
				background-position: center;
				background-size: 100% 100%;
			}
			.thumb-pic {
				width: 500px;
				height: 80px;
				background-color: black;
			}
			.share-box {
				margin-top: 20px;
				.share-icon {
					margin: 5px 0;
					display: inline-block;
					float: left;
					width: 20px;
					height: 20px;
					background-image: url(../assets/icons-2.png);
					background-position: -36px -35px;
				}
				.share-text {
					float: left;
					margin: 5px;
					/*height: 30px;*/
					/*line-height: 30px;*/
				}
				a {
					float: left;
					display: inline-block;
					width: 26px;
					height: 26px;
					background-image: url(../assets/icons-2.png);
				}
				.wechat-icon {
					background-position: -120px -4px;
					/*margin-top: 5px;*/
				}
				.sina-icon {
					background-position: -150px -4px;
				}
				.qq-icon {
					background-position: -180px -4px;
				}
			}
		}
		.select-right {
			width: 670px;
			height: 100%;
			float: right;
			/*background-color: blue;*/
			h1 {
				margin: 0;
				font-weight: normal;
				font-size: 1.7rem;
			}
			.select-goods-info {
				background-color: #f9f9f9;
				box-sizing: border-box;
				padding: 20px;
				height: 132px;
				position: relative;
				.select-goods-price {
					width: 400px;
					/*height: 45px;*/
					/*display: inline-block;*/
					overflow: hidden;
					.select-goods-price-1 {
						margin: 10px 0;
						font-size: 1.25rem;
						float: left;
					}
					.select-goods-price-2 {
						/*margin: 10px 0;*/
						margin-left: 10px;
						font-size: 2rem;
						float: left;
						color: #fc5454;
					}
					.select-goods-price-3 {
						margin-left: 10px;
						font-size: 1.75rem;
						float: left;
						color: white;
						background-color: #fc5454;
					}
				}
				.select-goods-discount {
					width: 400px;
					float: left;
					/*overflow: hidden;*/
					.select-goods-discount-1 {
						margin: 10px 0;
						font-size: 1.25rem;
						float: left;
					}
					.select-goods-discount-2 {
						margin: 13px 0;
						margin-left: 10px;
						color: #999999;
						/*font-size: 1.25rem;*/
						float: left;
					}
					.select-goods-discount-3 {
						margin-top: 12px;
						padding: 0 5px;
						margin-left: 10px;
						color: black;
						/*font-size: 1.25rem;*/
						border: 1px solid black;
						float: left;
						border-radius: 5px;
					}
				}
				.select-iprogress {
					width: 340px;
					float: left;
				}
				.select-goods-target {
					position: absolute;
					right: 40px;
					top: 30px;
					/*float: right;*/
					div {
						float: left;
						text-align: center;
						margin: 0 10px;
						padding-right: 10px;
						font-size: 1.05rem;
						/*line-height: 30px;*/
						box-sizing: border-box;
						&:first-child {
							border-right: 2px solid #dddddd;
							color: #777777;
						}
						span {
							display: inline-block;
							&:last-child {
								margin-top: 10px;
							}
						}
					}
				}
			}
			.select-goods-option {
				margin: 20px;
				div {
					margin-top: 20px;
					span {
						line-height: 30px;
					}
					ul,
					input {
						margin-left: 20px;
						display: inline-block;
						li {
							margin: 0 5px;
							line-height: 30px;
							padding: 0 5px;
							display: inline-block;
							box-sizing: border-box;
							border: 1px solid #cccccc;
							&:hover {
								border-color: #fc5454;
								color: #fc5454;
							}
							&.clicked {
								border: 2px solid #fc5454;
								color: #FC5454;
							}
						}
					}
				}
			}
			.buy-btn {
				margin: 30px 20px;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #a0a0a0;
				color: white;
				font-size: 1.5rem;
			}
			.other-info {
				padding: 0 20px;
				div {
					/*height: 30px;*/
					/*line-height: 30px;*/
					margin-top: 20px;
					span {
						margin-right: 20px;
						height: 30px;
						/*line-height: 30px;*/
					}
					.promise-day {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: -270px -2px;
						vertical-align: middle;
					}
					.promise-quality {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: -240px -2px;
						vertical-align: middle;
					}
					.pay-card {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: 0px 0px;
						vertical-align: middle;
					}
					.pay-ali {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: -30px 0px;
						vertical-align: middle;
					}
					.pay-wechat {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: -60px 0px;
						vertical-align: middle;
					}
					.pay-union {
						margin: 0;
						display: inline-block;
						width: 30px;
						height: 30px;
						background-image: url("../assets/icons-2.png");
						background-position: -90px 0px;
						vertical-align: middle;
					}
					.other-info-tips {
						color: #a0a0a0;
					}
					.tips-2 {
						margin-left: 85px;
						.tips-red {
							color: red;
						}
					}
				}
			}
		}
	}
</style>